<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onMounted } from 'vue'
import {
  ElUpload,
  ElScrollbar,
  ElImage,
  ElEmpty,
  ElMessage,
  ElMessageBox,
  ElIcon
} from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import useClipboard from 'vue-clipboard3'

export default defineComponent({
  components: {
    ElUpload,
    ElScrollbar,
    ElImage,
    ElEmpty,
    ElIcon,
    UploadFilled
  },
  setup() {
    const { toClipboard } = useClipboard()
    const uploadRef = ref()
    const state = reactive({
      fileList: [],
      actionUrl: 'http://zw-develop-tools.zwops.cn/upload/img',
      acceptList: '.jpg,.jpeg,.png,.gif,.JPG,.JPEG,.PNG,.GIF',
      limit: 10,
      maxHeight: 200
    })

    const exceedChange = (files: File[]) => {
      if (files.length > state.limit) {
        ElMessage.error(`一次最多上传${state.limit}张`)
      }
    }
    const successUpload = (res: any) => {
      const { code, data, msg } = res
      if (code === 0) {
        state.fileList.unshift(data)
      } else {
        ElMessage.error(msg)
      }
    }

    const errorUpload = (error: Error) => {
      console.log('error - -   ', error)
      ElMessage.error('上传失败，请重试')
    }

    const copy = async (value) => {
      try {
        await toClipboard(value)
        ElMessage.success('复制成功')
      } catch (e) {
        ElMessage.error('复制失败')
      }
    }

    const routeToNewTab = (path) => {
      window.open(path, '_blank')
    }

    const clearList = () => {
      ElMessageBox.confirm('确定要清空所有已上传的图片吗？', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        state.fileList.splice(0)
        uploadRef.value.clearFiles()
      })
    }

    const getMaxHeight = () => {
      state.maxHeight = document.documentElement.clientHeight - 250
    }

    onMounted(() => {
      getMaxHeight()
    })

    const stateRef = toRefs(state)
    return {
      exceedChange,
      successUpload,
      errorUpload,
      copy,
      routeToNewTab,
      clearList,
      uploadRef,
      ...stateRef
    }
  }
})
</script>

<template>
  <div class="content">
    <div class="upload-head">
      <el-upload
        ref="uploadRef"
        class="pic-upload"
        multiple
        drag
        :show-file-list="false"
        :limit="limit"
        :action="actionUrl"
        :accept="acceptList"
        list-type="picture"
        :on-exceed="exceedChange"
        :on-success="successUpload"
        :on-error="errorUpload"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text"><em>点击或拖拽上传</em></div>
      </el-upload>
      <div v-if="fileList.length" class="head-btn clear" @click="clearList">
        清空
      </div>
    </div>
    <div v-if="fileList.length" class="upload-list">
      <el-scrollbar :max-height="maxHeight">
        <div class="list">
          <div v-for="item in fileList" :key="item.name" class="item">
            <el-image
              placeholder="加载中.."
              :src="item.url"
              :preview-src-list="[item.url]"
              fit="cover"
            />
            <div class="pic-detail">
              <div class="pic-size">
                <div class="pic-size-dimension">
                  <div class="pic-size-label">图片尺寸：</div>
                  <div class="pic-size-value">
                    {{ `${item.dimensions.width}✖️${item.dimensions.height}` }}
                  </div>
                </div>
                <div class="pic-size-dimension">
                  <div class="pic-size-label">图片大小：</div>
                  <div class="pic-size-value">{{ item.mass }}</div>
                </div>
              </div>
              <div class="pic-link pic-origin">
                <div class="link-text">原图地址：</div>
                <div class="link-detail" @click="routeToNewTab(item.url)">
                  {{ item.url }}
                </div>
                <div class="link-copy" @click="copy(item.url)">复制原图</div>
              </div>
              <div class="pic-link pic-compress">
                <div class="link-text">压缩图地址：</div>
                <div
                  class="link-detail"
                  @click="routeToNewTab(item.compress_url)"
                >
                  {{ item.compress_url }}
                </div>
                <div class="link-copy" @click="copy(item.compress_url)">
                  复制压缩图
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div v-else class="default">
      <el-empty description="暂无数据" />
    </div>
  </div>
</template>

<style scoped lang="scss">
@import 'index.scss';
</style>
